<template>
<div class="remote-storage views-container">
    <div class="wlm-form">
        <div class="wlm-form-hearder">远程存储</div>
        <el-radio-group class="wlm-form-header-radio" v-model="formFormatData.formData.storageId" @change="resetFieldChange">
              <div class="wlm-form-notice warning" style="margin-left: -41px;margin-top: -10px;">
                <div>
                    温情提示：推荐使用远程存储，将降低服务器加载图片的压力，提升系统的运行加载速度
                </div>
            </div>
            <el-radio label="1">本地存储</el-radio>
            <el-radio label="2">阿里云OSS</el-radio>
            <el-radio label="3">七牛云存储</el-radio>
            <el-radio label="4">腾讯COS</el-radio>
        </el-radio-group>
        <section v-if="formFormatData.formData.storageId==='2'">
            <div class="wlm-form-notice warning">
                <div>
                  <span>如果切换到OSS后，需要将原有设置的附件传输至阿里云OSS</span><br>相关工具:
                    <a class="pointer" target="_blank" href="http://market.aliyun.com/products/53690006/cmgj000281.html">官方推荐OSS客户端工具（Windows版）</a>
                    <a class="pointer" href="http://bbs.aliyun.com/read/247023.html" target="_blank">其他官方推荐工具</a>
                </div>
            </div>
            <div class="wlm-form-content">
                <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="140px" class="retail-form" label-position="right">
                    <el-form-item label="Access Key" prop="AccessKey">
                        <el-input v-model="formFormatData.formData.AccessKey">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="Secret Key" prop="SecretKey">
                        <el-input v-model="formFormatData.formData.SecretKey">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="存储空间 (bucket)" prop="bucket">
                        <el-input v-model="formFormatData.formData.bucket">
                        </el-input>
                        <div class="form-help">空间名称</div>
                    </el-form-item>
                    <el-form-item label="访问url" prop="url">
                        <el-input v-model="formFormatData.formData.url">
                        </el-input>
                        <div class="form-help">请以HTTP，HTTPS开头</div>
                    </el-form-item>
                </el-form>
            </div>
        </section>
        <section v-if="formFormatData.formData.storageId==='3'">
            <div class="wlm-form-notice warning">如果切换到七牛存储后，需要将原有设置的附件传输至七牛存储, 相关工具： <a class="pointer" href="https://developer.qiniu.com/sdk#tool" target="_blank">官方工具</a></div>
            <div class="wlm-form-content">
                <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="140px" class="retail-form" label-position="right">
                    <el-form-item label="Access Key ID" prop="AccessKeyID">
                        <el-input v-model="formFormatData.formData.AccessKey">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="Access Key Secret" prop="AccessKeySecret">
                        <el-input v-model="formFormatData.formData.SecretKey">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="存储空间 (bucket)" prop="bucket">
                        <el-input v-model="formFormatData.formData.bucket">
                        </el-input>
                        <div class="form-help">空间名称</div>
                    </el-form-item>
                    <el-form-item label="访问url" prop="url">
                        <el-input v-model="formFormatData.formData.url">
                        </el-input>
                        <div class="form-help">请以HTTP，HTTPS开头</div>
                    </el-form-item>
                </el-form>
            </div>
        </section>
        <section v-if="formFormatData.formData.storageId==='4'">
            <div class="wlm-form-notice warning">如果切换到COS后，需要将原有设置的附件传输至腾讯COS, 相关工具： <a class="pointer" href="https://console.qcloud.com/cos/bucket" target="_blank">官方工具</a></div>
            <div class="wlm-form-content">
                <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="140px" class="retail-form" label-position="right">
                    <el-form-item label="App ID" prop="AppID">
                        <el-input v-model="formFormatData.formData.AccessKey">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="Secret ID" prop="SecretID">
                        <el-input v-model="formFormatData.formData.appID">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="Secret Key" prop="SecretKey">
                        <el-input v-model="formFormatData.formData.SecretKey">
                        </el-input>
                    </el-form-item>
                    <!-- <el-form-item label="地域">
            <el-select v-model="value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item> -->
                    <el-form-item label="存储空间 (bucket)" prop="bucket">
                        <el-input v-model="formFormatData.formData.bucket">
                        </el-input>
                        <div class="form-help">空间名称</div>
                    </el-form-item>
                    <el-form-item label="访问url" prop="url">
                        <el-input v-model="formFormatData.formData.url">
                        </el-input>
                        <div class="form-help">请以HTTP，HTTPS开头</div>
                    </el-form-item>
                </el-form>
            </div>
        </section>
    </div>
    <div class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" @click="formFormatSubmit" type="primary">保存</el-button>
    </div>
</div>
</template>

<script>
import {
  setData,
  storageSet
} from '@/api/setting'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'RemoteStorage',
  components: {

  },
  directives: {

  },
  data() {
    return {
      formFormatData: {
        key: ['remoteStorage'],
        api: {
          editForm: {
            api: setData,
            params: {
              key: 'storageSet',
              always: true
            }
          },
          submitForm: storageSet
        },
        formData: {
          key: 'storageSet',
          storageId: '2',
          appID: '',
          AccessKey: '',
          SecretKey: '',
          bucket: '',
          url: ''
        },
        rules: {
          AccessKey: [{
            required: true,
            message: '请输入Access Key',
            trigger: 'blur'
          }],
          SecretKey: [{
            required: true,
            message: '请输入Secret Key',
            trigger: 'blur'
          }],
          bucket: [{
            required: true,
            message: '请输入bucket',
            trigger: 'blur'
          }],
          url: [{
            required: true,
            message: '请输入url',
            trigger: 'blur'
          }],
          AccessKeyID: [{
            required: true,
            message: '请输入Access Key ID',
            trigger: 'blur'
          }],
          AccessKeySecret: [{
            required: true,
            message: '请输入Access Key Secret',
            trigger: 'blur'
          }],
          AppID: [{
            required: true,
            message: '请输入App ID',
            trigger: 'blur'
          }],
          SecretID: [{
            required: true,
            message: '请输入Secret ID',
            trigger: 'blur'
          }]
        }
      }
    }
  },
  methods: {
    resetFieldChange() {
      if (this.formFormatData.formData.storageId !== '1') {
        this.resetField()
      }
    }
  }
}
</script>
